<template>
  <div class="home center">
    <div class="name">{{ item.title }}</div>
    <div class="info">
      <div>发布时间：2002-03-06</div>
    </div>
    <div class="text" v-html="item.text"></div>
    <div
      class="attachment"
      v-if="item.attachment != '' && item.attachment != null"
    >
      <div class="name">附件</div>
      <div class="sum">
        <span class="el-icon-paperclip"></span>
        附件{{ item.attachment ? item.attachment.length : "0" }}个
      </div>
      <div class="files" v-for="(fileName, index) in item.attachment" :key="index">
        <div class="pointer" @click="downloadFile(fileName)">
          <div class="file xf">
            <div class="img">
              <i class="el-icon-document"></i>
            </div>
            <div class="body">
              <div
                style="
                  width: 170px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ $fileNameValidation(fileName) }}
              </div>
              <div style="font-size: 13px;margin-top: 14px">文件类型：{{fileName.split('.')[1]}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getProcurementListItem } from "@/api/procurement/list";
export default {
  name: "noticeDetails",
  data() {
    return {
      item: {},
    };
  },
  mounted() {
    getProcurementListItem({ id: this.$route.query.listId }).then((res) => {
      this.item = res.data;
      if (this.item.attachment != "" && this.item.attachment != null) {
        this.item.attachment = this.item.attachment.split(",");
      }
    });
  },
  computed: {},
  methods: {
    //附件下载
    downloadFile(fileName) {
      console.log(fileName);
      axios({
        method: "get",
        url:
          process.env.VUE_APP_BASE_API +
          "procurement/downloadFile?fileName=" +
          fileName,
        responseType: "blob",
        headers: {
          "data-type": "Buffer",
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let regular =
          /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/;
        if (regular.test(fileName)) {
          fileName = fileName.slice(36);
        }
        link.setAttribute("download", fileName); // 指定下载后的文件名，防跳转
        document.body.appendChild(link);
        link.click();
      });
    },
  },
};
</script>
<style scoped>
.text p {
  text-indent: 2em !important;
}
a {
  color: #000;
}
.el-icon-document {
  font-size: 50px;
  background-color: #fff;
}
.home {
  padding-bottom: 100px;
}
.name {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  padding: 30px 0;
}
.info {
  display: flex;
  justify-content: center;
  color: #666;
  margin-bottom: 30px;
}
.info > div {
  margin: 0 10px;
  font-size: 14px;
}
.text {
  line-height: 27px;
  padding: 0 100px;
  color: #656565;
  min-height: 600px;
}
.text > h4 {
  color: #555;
}
.attachment {
  padding: 0 100px;
}
.files {
  display: inline;
  display: flex;
  border-radius: 4px;
  padding: 10px;
  flex-wrap: wrap;
}
.file {
  width: 245px;
  display: flex;
  background-color: #e5e5e5;
  border-radius: 5px;
}
.file > .img {
  width: 70px;
  height: 70px;
  margin-right: 10px;
  text-align: center;
  line-height: 90px;
}
.file > .body {
  margin-top: 10px;
}
.attachment > .name {
  font-size: 20px;
  font-weight: 600;
  text-align: left;
}
.attachment > .sum {
  margin-bottom: 20px;
}
</style>
